{extend name="./public/base" /}
{block name="title"}搜索列表{/block}
{block name="style"}
<style type="text/css">
	.content{
		text-align: center;
		margin: auto;
		background-color:#fff;
		font-size: 12px
		color: #6e5858;
	}
	.top{
		width: 100%;
	    background-color: #ffba58;;
	    height: 35px;
	    color: #fff;
	    text-align: center;
	    line-height: 35px;
	    font-size: 14px
	}

	
	
	.line{
		height: 2px;
	    background-color: #edecec;
	    margin: 16px auto;
	    width: 90%;
	}
	.item{
		width: 96%;
	    margin: auto;
	    margin-top: 20px;
	}
	

	.item .title span{
		display: inline-block;
	}

	.item .title .dot{
		width: 20px;
	    height: 50px;
	    background-color: #ffba58;
	    border-radius: 10px;
	    position: relative;
	    top: 10px;
	}

	.item .title .title_{
		font-size: 38px;
    	font-weight: 600;
	}

	.item .item_content{
		margin: 30px;
	}

	.item .item_content span{
		display: inline-block;
		padding: 0 30px;
		border-radius: 20px;
		background-color:antiquewhite;
		margin-left: 30px;
		margin-top:18px;
	}
	.item .item_content .span{
		display: inline-block;
		padding: 0 30px;
		border-radius: 20px;
		background-color:#efeff491;
		margin-left: 30px;
		margin-top:18px;
	}
	.back{
		float: left;
	    margin-top: 8px;
	}
	.back img{
		width: 20px;
	}

	.info_list{
		margin:auto;
		width: 90%;
		color: #8c90a6;
    	font-size: 12px
    	margin-top: 60px;
	}
	.info_list .item{ 
		
	}

	.info_list .item span{
	 	display: inline-block;
	}
	.info_list .item .lable{
	    width: 46%;
	    text-align: left;
	
	}
	.info_list .item .value{
	 width: 50%;
	}
   	
   	.info .tags_line1 .my_tag{
   		width: 33%;
   		text-align: center;
   		padding-left: 0;
   		padding-bottom:40px;
   	}
   	
   	.button{
		height:40px;
		background-color: #ffba58;
		color:#fff;
		text-align: center;
		line-height: 40px;
		width:90%;
		margin:20px auto;
		border-radius: 40px;
   	}
</style>
{/block}
{block name="main"}
	<div id="app_content" class="content"> 
		<div class="top" >
			<span class="back"><img onclick="javascript:history.back(-1);" src="__STATIC__/images/back5.png" alt=""></span>
			<span>{{title}}</span>
		</div>
		<div class="info_list">
				<div class="my_info show">
					<div class="item">
					<span class="lable">性别:</span><span class="value"><input class="weui-input" type="text" id="gender" v-model="gender_name"></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">年龄:</span><span class="value"><input class="weui-input" type="text" id="age" v-model="age_name"></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">身高:</span><span class="value"><input class="weui-input" type="text" id="height" v-model="height_name"></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">收入:</span><span class="value"><input class="weui-input" type="text" id="income" v-model="income_name"></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">学历:</span><span class="value"><input class="weui-input" type="text" id="education" v-model="education_name"></span>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="lable">籍贯:</span><span class="value"><input class="weui-input" type="text" id="birth_city"></span>
					</div>
					<div class="line"></div>
				</div>
				<div class="button" @click="submit">开始搜索</div>
			</div>
	</div>
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
			    info: [],
			    title:'查询条件',
			    age:'',
			    age_name:"不限",
			    height:'',
			    height_name:"不限",
			    gender:'',
			    gender_name:"不限",
			    income_id:'',
			    income_name:"不限",
			    birth_city:'',
			    birth_city_name:"不限",
			    education_id:'',
			    education_name:"不限",
			    education_data:[],
			    education_data_standar:[],
			    income_data:[],
			    income_data_standar:[],
			},
		    methods:{
		    	getEducationList:function(){
		        	var t = this;
		        	$.ajax({
		        		async:false,
		        		url: host+'Cate/param',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {table:'education'},
		        		success:function(data){
		        			if(data.code == 1){
	        					education_data =  JSON.parse(JSON.stringify(data.data.data1));
	        					education_data_standar = JSON.parse(JSON.stringify(data.data.data));
	        					education_data.unshift({'title':'不限','value':0});
	        					t.education_data = education_data;
	        					t.education_data_standar = education_data_standar;	
		        			}
		        			console.log(education_data);
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        getIncomeList:function(){
		        	var t = this;
		        	$.ajax({
		        		async:false,
		        		url: host+'Cate/param',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {table:'income'},
		        		success:function(data){
		        			if(data.code == 1){
		        				income_data =  JSON.parse(JSON.stringify(data.data.data1));
		        				income_data_standar = JSON.parse(JSON.stringify(data.data.data));
		        				income_data.unshift({'title':'不限','value':0});
		        				t.income_data = income_data;
		        				t.income_data_standar = income_data_standar;
		        			}
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        submit:function(){
		        	var t = this;
		        	var gender = t.gender;
		        	var age = t.age;
		        	var height = t.height;
		        	var income_id = t.income_id;
		        	var education_id = t.education_id;
		        	var birth_city = t.birth_city;
		        	console.log('gender'+gender);console.log('age'+age);console.log('height'+height);console.log('income_id'+income_id);console.log('education_id'+education_id);console.log('birth_city'+birth_city);
		        	//return;
		        	window.location.href="{:url('user/search_list')}?gender="+gender+"&age="+age+"&height="+height+"&income_id="+income_id+"&education_id="+education_id+"&birth_city="+birth_city;
		        },
		    },
		    mounted: function () {
	            console.log("已初始化");
	            this.getIncomeList();
	            this.getEducationList();
	        }

		});

		$("#gender").select({
		  	title: "请选择搜索性别",
		 	items: [{'title':'不限','value':0},{'title':'男','value':1},{'title':'女','value':2}] ,
		 	onChange: function(result){
		    	vm.gender = result.values;
			},
		});
		$("#height").select({
		  	title: "请选择搜索身高",
		 	items: [{'title':'不限','value':0},{'title':'150-155','value':'150-155'},{'title':'155-160','value':'155-160'},{'title':'160-165','value':'160-165'},{'title':'165-170','value':'165-170'},{'title':'170-175','value':'170-175'},{'title':'175-180','value':'175-180'},{'title':'180-185','value':'180-185'},{'title':'185-190','value':'185-190'}],
		 	onChange: function(result){
		    	vm.height = result.values;
			},
		});

		$("#age").select({
		  	title: "请选择搜索年龄",
		 	items: [{'title':'不限','value':0},{'title':'18-21','value':'18-21'},{'title':'21-25','value':'21-25'},{'title':'25-30','value':'25-30'},{'title':'30-35','value':'30-35'},{'title':'35-40','value':'35-40'},{'title':'40-45','value':'40-45'},{'title':'45-50','value':'45-50'},{'title':'50-55','value':'50-55'}],
		 	onChange: function(result){
		    	vm.age = result.values;
			},
		});
		$("#education").select({
		    title: "请选择搜索学历",
		    items: vm.education_data,
		    onChange: function(result){
            	vm.education_id = result.values;
        	},
		});
		$("#income").select({
		    title: "请选择搜索收入",
		    items: vm.income_data,
		    onChange: function(result){
            	console.log(result.values);
            	vm.income_id = result.values;
        	},
		});
		$("#birth_city").cityPicker({
		    title: "请选择您的籍贯",
		    onChange: function(result){
	        	console.log(result.displayValue);
	        	var birthCity = result.displayValue.join('-');
	        	vm.birth_city = birthCity;
    		}, 
		});
		
	});
</script>
{/block}